<template>
    <div class="login">
        <el-form label-width="40px" >
            <el-form-item label="账号">
                <el-input v-model="userInfo.userName"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="userInfo.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="jumpTo">登录</el-button>
                <el-button @click="reset()">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
export default {
    data(){
        return{
            userInfo:{}
        }
    },
    computed:{
        ...mapState({
            loginData:'loginData',
            user:'user',
        })
    },
    methods:{
        ...mapActions({
            adminLogin:'adminLogin'
        }),
        jumpTo(){
            this.adminLogin(this.userInfo).then(() => {
                this.$alert(this.loginData.message);
                if(this.loginData.status === 0){                  
                    this.userInfo = {};
                }else if(this.loginData.status === 1 ){
                    this.$router.push('/');
                    this.$cookies.set('accessToken', this.loginData.data.accessToken);
                }
            })
        },
        reset(){
            this.userInfo={};
        }
    }
}
</script>

<style lang="scss" scoped>
.login{
    width: 360px;
    margin: 10% auto 0;
    background: #fff;
    padding: 60px 50px 40px;
    box-shadow: 0px 1px 7px rgba(0,0,0,.2);
}
</style>

